import axios, { type AxiosResponse } from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入pinia模块
import pinia from '@/stores/index'
// 引入pinia的用户仓库模块
import { useUserInfoStore } from '../stores/userInfo'

/* 定义response对象的data接口 */
interface ResponseData<T> {
  code: number
  data: T
  message: string
}

console.log(import.meta.env.VITE_API_URL)
// 配置新建一个 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 50000,
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
  // @ 请问以前在进行请求拦截的时候通常做什么事？
  // 获取token，然后添加到请求头中
  // 1.如何获取？
  // 2.如何添加？

  // 实例化仓库
  // 以前useUserInfoStore函数的实例化是写在哪里的？是写在组件里的！
  // 组件里是不是可以有隐式原型链的概念？
  // 现在我们的仓库操作是在哪里？是在一个独立的js文件里的，是请求的二次封装里，这里有没有vue？没有！
  // 没有vue，能不能通过vue的隐式原型链找到useUserInfoStore仓库函数？不能！
  const userInfoState = useUserInfoStore(pinia) // 一定要加pinia，是要传入pinia的实例，这样的话，仓库模块才知道我是pinia的仓库模块实例，而不是其它的实例对象
  if (userInfoState.token) {
    ;(<any>config.headers)['token'] = userInfoState.token
  }

  return config
})

// 添加响应拦截器
service.interceptors.response.use(
  /* 约束一下response */
  async (response: AxiosResponse<ResponseData<any>>) => {
    // 对响应数据做点什么
    const res = response.data
    if (res.code !== 20000 && res.code !== 200) {
      /* 成功数据的code值为20000/200 */
      // 统一的错误提示
      ElMessage({
        message:
          (typeof res.data == 'string' && res.data) || res.message || 'Error',
        type: 'error',
        duration: 5 * 1000,
      })

      // `token` 过期或者账号已在别处登录
      if (response.status === 401) {
        const storeUserInfo = useUserInfoStore(pinia)
        await storeUserInfo.reset()
        window.location.href = '/' // 去登录页
        ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
          .then(() => {})
          .catch(() => {})
      }
      return Promise.reject(service.interceptors.response)
    } else {
      return res.data /* 返回成功响应数据中的data属性数据 */
    }
  },
  (error) => {
    // 对响应错误做点什么
    if (error.message.indexOf('timeout') != -1) {
      ElMessage.error('网络超时')
    } else if (error.message == 'Network Error') {
      ElMessage.error('网络连接错误')
    } else {
      if (error.response.data) ElMessage.error(error.response.statusText)
      else ElMessage.error('接口路径找不到')
    }
    return Promise.reject(error)
  },
)

export default service
